<template>
  <!-- 地块信息 制作时间：2024-3-12 -->
  <div class="agriMonitoring">
    <!-- 搜索框 -->
    <div class="searchBox">
      <el-select
        v-model="params.plantingVariety"
        popper-class="selectInp"
        :popper-append-to-body="false"
        class="searchInp"
        placeholder="种植种类"
         clearable
      >
        <el-option
          v-for="item in plantingVarietys"
          :key="item.id"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="params.landType"
        class="searchInp"
         clearable
        placeholder="地块类型"
      >
        <el-option
          v-for="item in landTypes"
          :key="item.id"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="params.state"
        class="searchInp"
        placeholder="地块状态"
         clearable
      >
        <el-option
          v-for="item in landStates"
          :key="item.value"
          :label="item.value"
          :value="item.label"
        >
        </el-option>
      </el-select>
      <el-input
        class="searchInp"
        v-model="params.landName"
        placeholder="地块搜索"
      ></el-input>
      <el-button
        class="searchBtn"
        type="primary"
        icon="el-icon-search"
        @click="search()"
        >查 询</el-button
      >
    </div>
    <!-- 列表 -->
    <div class="tableList">
      <el-button type="primary" class="addBtn" @click="addLand()">
        <i class="el-icon-plus"></i>
        添加地块
      </el-button>
      <el-table
        class="list"
        :data="tableData"
        style="width: 100%"

        :row-style="{

        }"
        :header-cell-style="{
          background: '#F6F8F9 ',
          color: '#000000',
        }"
      >
        <el-table-column label="序号" >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="农场地块名称">
          <template slot-scope="scope">
            <span>{{ scope.row.landName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="占地面积（亩）">
          <template slot-scope="scope">
            <span>{{ scope.row.landArea }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地块类型">
          <template slot-scope="scope">
            <span>{{ scope.row.landType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="种植种类">
          <template slot-scope="scope">
            <span>{{ scope.row.plantingVariety===null ? '-' :scope.row.plantingVariety }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template slot-scope="scope">
            <span>{{ scope.row.responsiblePersonName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? "种植中" : "空闲中" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="delBtn(scope.row.landId)"
            >
              <el-button
                size="mini"
                type="danger"
                slot="reference"
                style="margin-left: -0.8vw"
                >删除</el-button
              >
            </el-popconfirm>
            <el-button
              size="mini"
              slot="reference"
              @click="openDetail(scope.row)"
              style="margin-left: 0.8vw"
              >查看地块</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getLandInfoPageApi, delLandInfoApi } from '@/api/agriLand'
import { getSysSonDictListApi } from '@/api/dict'
export default {
  name: 'agriMonitoring',
  data () {
    return {
      params: {
        baseId: 1,
        current: 1,
        pageSize: 6,
        landType: '',
        plantingVariety: '',
        state: '',
        landName: ''
      },
      tableData: null,
      plantingVarietys: null,
      landTypes: null,
      landStates: [
        { value: '空闲中', label: 0 },
        { value: '种植中', label: 1 }
      ],
      valueArea: '',
      total: null,
      currentPage: 1
    }
  },
  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getLandInfoPage(this.params)
    this.getSysSonDictList()
  },

  methods: {
    // 地块page查询
    async getLandInfoPage (params) {
      console.log(params)
      const res = await getLandInfoPageApi(params)
      // console.log(res.data.records)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    addLand () {
      this.$router.push({
        path: '/shuzhongtian/agriAreaAdd'
      })
    },
    // 字典
    async getSysSonDictList () {
      // 种植种类
      const res1 = await getSysSonDictListApi('ZZZL')
      // console.log(res1.data)
      this.plantingVarietys = res1.data
      // 地块类型
      const res2 = await getSysSonDictListApi('DKLX')
      // console.log(res2.data)
      this.landTypes = res2.data
    },
    // 删除按钮
    async delBtn (id) {
      const res = await delLandInfoApi(id)
      if (res.code === 200) {
        this.$message.success('删除成功')
        this.getLandInfoPage(this.params)
      } else {
        this.$message.error('删除失败')
      }
    },
    // 查询
    search () {
      this.getLandInfoPage(this.params)
    },
    // 查看详情
    openDetail (landObj) {
      console.log(landObj, '路由')
      this.$router.push({
        path: '/shuzhongtian/agriLandDetail',
        query: {
          landId: landObj.landId,
          baseId: landObj.baseId
        }
      })
      this.$store.dispatch('mission/updateLandDetail', landObj)
    },
    //     openDetail (landObj) {
    //   this.$router.push({
    //     path: '/shuzhongtian/agriLandDetail',
    //     query: {
    //       landId: 123
    //     }
    //   })
    //   this.$store.dispatch('mission/updateLandDetail', landObj)
    // },
    // 翻页
    handleCurrentChange (val) {
      this.params.current = val
      this.getLandInfoPage(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.agriMonitoring {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #fff;
  .searchBox {
    font-weight: 600;
    margin-bottom: 1.5625vw;
    width: 19.25rem;
    height: 6.25vw * 0.834;
    line-height: 6.25vw * 0.834;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    padding: 0 0.37rem;
    ::v-deep .el-select > .el-input {
      height: 3.5vw;
    }
    .searchInp {
      width: 16.4708vw;
      height: 0.75rem * 0.834;
      margin-right: 1vw;
    }
    .searchBtn {
      background-color: #6adfae;
      border: #80efb1;
      font-weight: 600;
      width: 5.8333vw;
      height: 3.125vw * 0.834;
    }
    .searchBtn:hover {
      background-color: #80efb1;
    }
  }
  .tableList {
    width: 80.2083vw;
    height: 35.4167vw * 0.834;
    border-radius: 20px;
    background: #fff;
    padding: 1.0417vw;
    .addBtn {
      margin-bottom: 1.5625vw * 0.834;
    }
    .list {
      text-align: center;
    }
  }
  .pagination {
    margin-top: 1.5625vw *0.834;
    text-align: center;
  }
}
@media screen and (max-width: 1450px) {
  .agriMonitoring {
.searchBox {
    font-weight: 600;
    margin-bottom: 1.5625vw *0.779;
    width: 19.25rem;
    height: 6.25vw * 0.779;
    line-height: 6.25vw * 0.779;
    background: #ffffff;
    border-radius: 20px 20px 20px 20px;
    padding: 0 0.37rem;
    ::v-deep .el-select > .el-input {
      height: 3.5vw;
    }
    .searchInp {
      width: 16.4708vw;
      height: 0.75rem * 0.779;
      margin-right: 1vw;
    }
    .searchBtn {
      background-color: #6adfae;
      border: #80efb1;
      font-weight: 600;
      width: 5.8333vw;
      height: 3.125vw * 0.779;
    }
    .searchBtn:hover {
      background-color: #80efb1;
    }
  }
  .tableList {
    width: 80.2083vw;
    height: 35.4167vw * 0.779;
    border-radius: 20px;
    background: #fff;
    padding: 1.0417vw;
    .addBtn {
      margin-bottom: 1.5625vw * 0.779;
    }
    .list {
      text-align: center;
    }
  }
  .pagination {
    margin-top: 1.5625vw *0.779;
    text-align: center;
  }
  }

}
</style>
